<template>
  <div>
    <el-card class="box-card">
      <el-row slot="header">
        <!--<el-row type="flex" justify="center ">-->
        <el-col :md="4" :sm="8" :xs="24" class="fl clearfix">
          <el-dropdown v-if="operable" @command="handleCommand">
            <el-button size="mini" class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
        </el-col>
        <el-col :md="9" :sm="16" :xs="24" class="fr flex-box">
          <router-link v-if="creatable" :to="{name:createPath}">
            <el-button type="success" size="mini" class=" mr10">新增</el-button>
          </router-link>
          <span>
            <el-button v-if="exportable" type="primary" size="mini" class=" mr10" @click="handleDownload">
              导出
            </el-button>
          </span>
          <el-col v-if="searchable" :md="8" :sm="10" :xs="10">
            <el-input v-model="searchKey" size="mini" placeholder="请输入id">
              <template slot="prepend">id:</template>
            </el-input>
          </el-col>
          <!--<el-col :span="3">-->
          <el-button-group v-if="searchable" class=" mr10">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="search"/>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh"/>
          </el-button-group>
          <!--</el-col>-->

          <!--<el-button-group v-if="filterable">-->
          <!--<el-button type="primary" icon="el-icon-info" @click="dialogVisible=true" size="mini">筛选-->
          <!--</el-button>-->
          <!--<el-button type="primary" icon="el-icon-refresh" size="mini"></el-button>-->
          <!--</el-button-group>-->

          <!--筛选-->
          <!--<el-dialog-->
          <!--title="提示"-->
          <!--:visible.sync="dialogVisible"-->
          <!--width="30%"-->
          <!--:before-close="handleClose">-->
          <!--<el-form>-->
          <!--<el-form-item>-->
          <!--<el-input placeholder="请输入内容" v-model="filterList.id">-->
          <!--<template slot="prepend">Id</template>-->
          <!--</el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item>-->
          <!--<el-autocomplete-->
          <!--class="inline-input"-->
          <!--:fetch-suggestions="authSearch"-->
          <!--placeholder="请输入内容"-->
          <!--style="width:100%;"-->
          <!--v-model="filterList.auth"-->
          <!--suffix-icon="el-icon-arrow-down"-->
          <!--&gt;-->
          <!--<template slot="prepend">User</template>-->
          <!--</el-autocomplete>-->

          <!--</el-form-item>-->

          <!--<el-form-item>-->
          <!--<el-autocomplete-->
          <!--class="inline-input"-->
          <!--:fetch-suggestions="methodSearch"-->
          <!--placeholder="请输入内容"-->
          <!--style="width:100%;"-->
          <!--v-model="filterList.method"-->
          <!--suffix-icon="el-icon-arrow-down"-->
          <!--&gt;-->
          <!--<template slot="prepend">Method</template>-->
          <!--</el-autocomplete>-->
          <!--</el-form-item>-->
          <!--<el-form-item>-->
          <!--<el-input placeholder="请输入内容" v-model="filterList.path">-->
          <!--<template slot="prepend">Path</template>-->
          <!--</el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item>-->
          <!--<el-input placeholder="请输入内容" v-model="filterList.ip">-->
          <!--<template slot="prepend">Ip</template>-->
          <!--</el-input>-->
          <!--</el-form-item>-->

          <!--</el-form>-->

          <!--<span slot="footer" class="dialog-footer">-->
          <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
          <!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
          <!--</span>-->
          <!--</el-dialog>-->

        </el-col>
        <!--</el-row>-->
        <!--是否显示操作按钮-->
      </el-row>

      <!--表格-->
      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        :editable="editable"
        :deletable="deletable"
        @selectionChange="selectionChange"
        @del="del"
        @edit="edit"
      />
      <v-pagination
        v-if="showPagination"
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />

    </el-card>
  </div>
</template>

<script>

export default {
  props: {
    tableTitle: {
      type: Array,
      default: () => { return [] }
    },
    tableData: {
      type: Array,
      default: () => { return [] }
    },
    type: {
      type: String,
      default: () => ''
    },
    operable: {
      type: Boolean,
      default: () => false
    },
    editable: {
      type: Boolean,
      default: () => true
    },
    createPath: {
      type: String,
      default: () => ''
    },
    exportable: {
      type: Boolean,
      default: () => false
    },
    filterable: {
      type: Boolean,
      default: () => false
    },
    searchable: {
      type: Boolean,
      default: true
    },
    creatable: {
      type: Boolean,
      default: true
    },
    deletable: {
      type: Boolean,
      default: false
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    getTableList: {
      type: Function,
      default: () => false
    }
  },
  data() {
    return {
      searchKey: '',
      dialogVisible: false,
      focused: true,
      authList: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }],
      methodList: [{ value: 'a' }, { value: 'b' }, { value: 'c' }, { value: 'd' }, { value: 'e' }],
      filterList: {
        auth: '',
        method: '',
        id: null,
        path: '',
        ip: ''
      },
      downloadLoading: false,
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      }
    }
  },

  created() {
    this.$emit('childTitle', this.$route.meta.title1)
    this.getTableList({ page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize }, this.pageInfo)
  },
  methods: {
    refresh() {
      // this.$emit('refresh');
      this.getTableList({ rows: this.pageInfo.pageSize }, this.pageInfo)
    },
    search() {
      this.getTableList({ id: this.searchKey, rows: this.pageInfo.pageSize }, this.pageInfo)
    },

    selectionChange(val) {
      this.$emit('selectionChange', val)
    },
    handleClose() {
      this.dialogVisible = false
    },
    authSearch(queryString, cb) {
      return cb(this.authList)
    },
    methodSearch(queryString, cb) {
      return cb(this.methodList)
    },
    handleCommand(command) {
      command()
    },
    del(val) {
      // console.log('list_card',val);
      this.$emit('del', val)
    },
    edit(val) {
      this.$emit('edit', val)
    },

    // 导出excel
    handleDownload() {
      this.downloadLoading = true
      console.log(this.tableData)
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = this.tableTitle.map(item => item.cn)
                  const filterVal = this.tableTitle.map(item => item.en)
                  const list = this.tableData
                  const data = this.formatJson(filterVal, list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: this.filename,
                    autoWidth: this.autoWidth,
                    bookType: this.bookType
                  })
                  this.downloadLoading = false
                })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

